<template>
    <div class="goods-item" @click="itemClick">
            <div>
                <img v-lazy="showImg" alt="" :key="showImg" @load="imgLoad">
            </div>
            <div class="info">
                <p>{{goodsItem.title}}</p>
                <span class="price">{{goodsItem.price}}</span>
                <span class="collect">{{goodsItem.cfav}}</span>
            </div>
    </div>
</template>


<script>
export default {
    props: {
        goodsItem: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    computed: {
        showImg() {
            // return this.goodsItem.img || this.goodsItem.image || this.goodsItem.show.img
            return this.goodsItem.show ? this.goodsItem.show.img : this.goodsItem.img || this.goodsItem.image
        }
        
    },
    methods: {
        imgLoad() {
            // this.$bus.$emit('imgLoad')
            this.$emit('imgLoad')
            // if (this.$route.path.indexOf('home')) {
            //     this.$emit('imgLoad')
            // } 
            
            // if (this.$route.path.indexOf('detail')) {
            //     // console.log(333);
            //     this.$emit('detailImgLoad')
            // }

            
        },
        itemClick() {
            this.$router.push('/detail/' + this.goodsItem.iid)
        }
    }
}
</script>


<style scoped>
    .goods-item{
        /* flex: 50%; */
        width: 48%;
        
        
    }
    

    .goods-item img{
        width:100%;
        border-radius: 5px;
    }

    .goods-item .info{
        font-size: 12px;
        text-align: center;
        margin: 5px 0 7px;
       
    }

    .goods-item .info p{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-bottom: 3px;
        
    }

    .goods-item .info .price{
        color: var(--color-tint);
        margin-right: 5px;
    }

    .goods-item .info .collect::before{
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url('~assets/img/common/collect.svg') no-repeat left top/14px 14px;
        vertical-align: -1px;
    }
</style>